<template>
	<view>
		<!-- 	<button @click="$go('login/index')">登录</button>
		<button @click="$go('neworder/confirm')">再来一单</button> -->
		<!-- <my-custom bgColor="bgfff">
			<view slot="content">
				<view class="dsf alc jcc h100b col333 fwb ">{{''+$root.m0+''}}</view>
			</view>
			<view slot="left">
				<view class="pl24 ">
					<view class="fz28 col666 ">{{$root.m1}}</view>
				</view>
			</view>
		</my-custom> -->
		<u-sticky bgColor="#fff">
			<u-tabs :activeStyle="activeStyle" @change="choose" :scrollable="false" :current="currenttab"
				:list="tabs"></u-tabs>
		</u-sticky>
		<view v-if="list.length==0">
			<u-empty marginTop="60" mode="order" text="订单为空">
			<!-- 	<view @click="$go('login/index')" class="login ">登录</view> -->
			</u-empty>
		</view>
		<block v-else>
			<view v-for="(item,index) in list" :key="index">
				<view class=" pl24 pr24  ">
					<view class="pt30 ">
						<view class="pl24 pr24 pt24 pb24 bgfff bdra20 ">
							<view @click="$go('neworder/detail?id='+item.id)">
								<view class="mb-20 bb pb-16 fz26 col999 relative">
									订单号：{{item.order_number}}
									<view class="absolute r0 t0">{{item.updated_at}}</view>
								</view>
								<view class="dsf alc jcsb ">
									<view class="dsf alc ">
										<view class="h45 dsf alc pl15 pr15 col0083FE fz26 bd0083FE bdra5">
											{{item.freight_name}}
										</view>
										<view class="pl15 fz34 col333 fwb ">{{item.vehicle.title}}</view>
									</view>
									<view class="fz24 col666 "></view>
								</view>
								<view class="pt24 ">
									<view class="pt24 pl24 pr24">
										<view class="dsf alc fz26 col999 pb24 ">
											<view class="bdra50b bg0083FE pretend ">装</view>
											<text>{{item.place.delive.mapAddress}}</text>
										</view>
										<view v-for="(row,idx) in item.place.receive" class="dsf alc fz28 col999 pb24 ">
											<view class="bdra50b bgFD6901 pretend ">卸</view>
											<text>{{row.mapAddress}}</text>
										</view>


										<view class="h84 dsf jcfe alc fz32 col333  t-money ">
											合计：<text
												class="colFD6901">￥{{(item.total_price?item.total_price:item.real_price)}}</text>
											<text class="col999">(含保险费{{item.have_paid_price}}元)</text>
										</view>
									</view>
								</view>
							</view>
							<view class="pt24 dsf jcfe alc">
								<!-- <view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15"
									v-if="item.status==0||item.status==1">{{item.m7}}</view>
								<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc " v-if="item.status==0">
									{{item.m8}}
								</view>
								<view @click="$go('neworder/take')" class="w154 h60 bd999 col999 bdra8 dsif alc jcc"
									v-if="item.status!=0">
									{{item.m9}}
								</view> status-->
								<block v-if="param.status==0">
									<view @click="sDel=true;act_item=item" class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">取消订单</view>
									<view class="w154 h60 bg0083FE colfff bdra8 dsif alc jcc ">
										立即支付
									</view>
								</block>
								<block v-else-if="param.status==1">
									<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">取消订单</view>
								</block>
								<block v-else-if="param.status==2">
									<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">在线咨询</view>
								</block>

								<block v-else-if="param.status==3">
									<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">评价</view>
									<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">申请开票</view>
								</block>
								<block v-else-if="param.status==4">
									<view class="w154 h60 bd999 col999 bdra8 dsif alc jcc my-mr30rpx mr-15">再来一单</view>
								</block>
								
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- <u-modal :cancelText="$root.m12" :closeOnClickOverlay="true" :confirmText="$root.m11" v-show="showCancelModal"
			v-showCancelButton="true" :title="$root.m10+'？'"></u-modal> -->
		<st-tabbar :tabbar="tabbar"></st-tabbar>
		<!--删除弹窗-->
		<u-modal :show="sDel" cancelText="暂不取消" @cancel="sDel=false" @confirm="comDel" :showCancelButton="true"
			closeOnClickOverlay class="box">
			<view class="tip-text pt-30 pb-30 fz30">
				确定取消订单？
			</view>
		</u-modal>
	</view>
	

</template>

<script>
	export default {
		data() {
			return {
				tabbar: {
					current: 1
				},
				tabs: [{
					name: this.$t("待支付"),
					val: -1
				}, {
					name: this.$t("待接单"),
					val: -2
				}, {
					name: this.$t("进行中"),
					val: 1
				}, {
					name: this.$t("已完成"),
					val: 2
				}, {
					name: this.$t("已取消"),
					val: 0
				}],
				activeStyle: {
					color: "#3c9cff"
				},
				showCancelModal: !1,
				cancelItem: {},
				currenttab: 0,
				list: [],
				param: {
					limit: 10,
					page: 1,
					status: 0
				},
				last_page: 0,
				sDel: false,
				act_item: {}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			this.param.page++;
			if (this.param.page > this.last_page) {
				return;
			}
			this.getList();
		},
		methods: {
			comDel() {
				this.$api['del']('order/cancel-order', {orderid: this.act_item.id}).then(res => {
					if (res.code == 200) {
						this.sDel = false;
						this.$toast({
							title: "取消成功"
						});
						this.param.page = 1;
						this.getList();
					}
				});
			},
			choose(e) {
				this.param.status = e.index;
				this.param.page = 1;
				this.getList();
			},
			getList() {
				this.$api['post']("order/order-list", this.param).then(res => {
					if (res.code == 200) {
						if (this.param.page == 1) {
							this.last_page = res.data.last_page;
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);

						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #eef2fd
	}

	.t-money {
		border-top: 1px solid #e1e1e1
	}

	.pretend,
	.through {
		color: #fff;
		font-size: 20upx;
		height: 36upx;
		line-height: 36upx;
		margin-right: 20upx;
		text-align: center;
		width: 36upx
	}

	.through {
		background-color: #9d9d9d
	}

	.discharge {
		color: #fff;
		font-size: 20upx;
		height: 36upx;
		line-height: 36upx;
		margin-right: 20upx;
		text-align: center;
		width: 36upx
	}

	.login {
		border: 1upx solid #0083fe;
		border-radius: 10upx;
		color: #0083fe;
		margin-top: 20upx;
		padding: 10upx 30upx
	}

	.invoice {
		margin-right: 20upx
	}
</style>